<template>
  <div class="reporting-list">
    <el-card shadow="never" class="card-com">
      <div class="card-1">
        <searchPanel @refresh="getData('reset')">
          <template v-slot:search>
            <el-form :inline="true" :model="listSearch" class="demo-form-inline" label-width="120px">
              <el-row :gutter="20">
                <el-col :xs="24" :sm="12" :sd="12" :lg="8" :xl="6">
                  <el-form-item label="渠道Key">

                    <ChannelSelect v-model:select-value="listSearch.condition.channelCode"
                      @my-change="getData('search')"></ChannelSelect>

                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :sd="12" :lg="8" :xl="6">
                  <el-form-item label="上报平台">
                    <BlackSelect v-model="listSearch.condition.reportingPlatformCode"
                      :options="listCollect.reportingPlatformCodeList" :filterable="true" @change="getData('search')">
                    </BlackSelect>
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :sd="12" :lg="8" :xl="6">
                  <el-form-item label="订单号">
                    <NormalInput v-model:model-value="listSearch.condition.orderNo" @get-data="getData('search')">
                    </NormalInput>
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :sd="12" :lg="8" :xl="6">
                  <el-form-item label="上报流水单号">
                    <NormalInput v-model:model-value="listSearch.condition.reportingSerialNo"
                      @get-data="getData('search')"></NormalInput>
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :sd="12" :lg="8" :xl="6">
                  <el-form-item label="环境编码">
                    <BlackSelect v-model="listSearch.condition.environmentCode" :options="listCollect.envList"
                      :filterable="true" @change="getData('search')"> </BlackSelect>
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :sd="12" :lg="8" :xl="6">
                  <el-form-item label="场景编码">
                    <BlackSelect v-model="listSearch.condition.scenarioCode" :options="listCollect.sceneList"
                      :filterable="true" @change="getData('search')"> </BlackSelect>
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :sd="12" :lg="8" :xl="6">
                  <el-form-item label="数据类型">
                    <BlackSelect v-model="listSearch.condition.dataType" :options="reportProductType"
                      @change="getData('search')"> </BlackSelect>
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :sd="12" :lg="8" :xl="6">
                  <el-form-item label="上报状态">
                    <BlackSelect v-model="listSearch.condition.reportingStatus" :options="reportStatus"
                      @change="getData('search')"> </BlackSelect>
                  </el-form-item>
                </el-col>


                <el-col :xs="24" :sm="12" :sd="12" :lg="8" :xl="6">
                  <el-form-item label="是否开启上报">
                    <el-select v-model="listSearch.condition.enableReporting" @change="getData('search')" clearable>
                      <el-option value="1" label="是">是</el-option>
                      <el-option value="2" label="否">否</el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :sd="12" :lg="8" :xl="6">
                  <el-form-item label="上报类型">
                    <el-select v-model="listSearch.condition.enableReporting" @change="getData('search')" clearable>
                      <el-option value="1" label="手动上报"></el-option>
                      <el-option value="2" label="自动上报"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>


              </el-row>
              <el-row justify="end">
                <el-button type="primary" @click="getData('search')">查询</el-button>
                <el-button @click="getData('reset')">重置</el-button>
              </el-row>
            </el-form>
          </template>
          <!-- 字段添加 -->
          <template v-slot:edit>

            <DropItem v-model:table-prop="tableProp"></DropItem>
          </template>
        </searchPanel>
      </div>
      <div class="card-2">
        <OnlyTable ref="onlyTableRef" class="card-2" :tableProps="tableProp" :pageTotal="pageParams.total"
          @get-page="handPage" :tableData="pageParams.tableData" :tableHeight="pageParams.tableHeight"
          :loading="pageParams.loadIng">
          <template #handle="scope">
            <el-button
              v-if="scope.row.reportingType == '手动上报' && (scope.row.reportingStatus == '未上报' || scope.row.reportingStatus == '上报失败')"
              type="primary" size="small" link @click="reportBtn(scope.row)">上报</el-button>
          </template>
        </OnlyTable>
      </div>
    </el-card>

  </div>
</template>
<script setup lang="ts">
/************************************引入************************************************* */
import {
  reactive,
  onMounted,
  defineAsyncComponent,
  ref,
  nextTick,
  onUnmounted,
} from "vue";
import _ from "lodash"
import { storeToRefs } from "pinia";
import { Search, Plus, Bottom, Refresh } from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";
import { reportingListStore } from './pageStore'
import { useComListData } from "@/store/list";
import { useEnumStore } from "@/store/enumeration";

/************************************数据************************************************* */
const { listCollect, getEnvList, getSceneList, getReportingPlatformCode } = useComListData()
const { detailData, tableProp, listSearch, pageParams } = storeToRefs(reportingListStore())
const { getData1, reportBtn } = reportingListStore()
const { reportType, reportStatus, reportProductType } = useEnumStore()
const onlyTableRef = ref()
onMounted(() => {
  getData1('reset')
  getEnvList()
  getSceneList()
  getReportingPlatformCode()
})
const handPage = (val: { pageNum: number; pageSize: number }) => {
  listSearch.value.pageNum = val.pageNum;
  listSearch.value.pageSize = val.pageSize;
  getData("search");
};
const getData = (type: string) => {
  if (type == 'reset') {
    onlyTableRef.value.initPagination()
  }
  getData1(type)
}
</script>
<style lang="scss" scoped>
.reporting-list {
  height: calc(100vh - 70px);
  .card-com {
    display: flex;
    flex-direction: column;
    .card-2 {
      flex-grow: 1;
    }
  }
}
</style>